<!doctype html>
<html lang="en">
<head>
    <title>Overview</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="description" content="%description%" />
    <meta name="keywords" content="" />
    <meta name="author" content="ComponentOne" />
    
    <link href="../../themes/rocket/jquery-wijmo.css" rel="stylesheet" type="text/css" />
    <link href="../../themes/wijmo/jquery.wijmo.wijrating.css" rel="stylesheet" type="text/css" />
    
    <script src="../../external/jquery-1.8.2.min.js" type="text/javascript"></script>
    <script src="../../external/jquery-ui-1.9.1.custom.min.js" type="text/javascript"></script>
    <script src="../../wijmo/jquery.wijmo.wijrating.js" type="text/javascript"></script>
    <style type="text/css">
        
    </style>
    <script id="scriptInit" type="text/javascript">
        $(document).ready(function () {
            $('#ratingSelect').wijrating();
            $('#ratingRadio').wijrating();
            $('#ratingDiv').wijrating({ value: 4 });
        });
    </script>
</head>
<body class="demo-single">
    <div class="container">
        <div class="header">
            <h2>
                Overview</h2>
        </div>
        <div class="main demo">
            <!-- Begin demo markup -->
            <h4>Select</h4>
            <div>
                <select id="ratingSelect">
                    <option value="1">Below Average</option>
                    <option value="2">Average</option>
                    <option selected="selected" value="3">Above Average</option>
                    <option value="4">Awesome</option>
                    <option value="5">Epic</option>
                </select>
            </div>
            <h4>Radio</h4>
            <div>
                <div id="ratingRadio">
                    <label for="input1a">
                        Below Average</label>
                    <input type="radio" id="input1a" value="1" name="rating" />
                    <label for="input2a">
                        Average</label>
                    <input type="radio" checked="checked" id="input2a" value="2" name="rating" />
                    <label for="input3a">
                        Above Average</label>
                    <input type="radio" id="input3a" value="3" name="rating" />
                    <label for="input4a">
                        Awesome</label>
                    <input type="radio" id="input4a" value="4" name="rating" />
                    <label for="input5a">
                        Epic</label>
                    <input type="radio" id="input5a" value="5" name="rating" />
                </div>
            </div>
            <h4>DIV</h4>
            <div>
                <div id="ratingDiv">
                </div>
            </div>
            <!-- End demo markup -->
            <div class="demo-options">
                <!-- Begin options markup -->
                <!-- End options markup -->
            </div>
        </div>
        <div class="footer demo-description">

<p>The wijrating widget that generates a customizable star rating widget automatically.</p>
<p> The widget is based on a set of select options, or radio inputs, or div with widget options. </p>

        </div>
    </div>
</body>
</html>
